<section class="fd-section" *ngIf="nodeParams">
  <div class="fd-layout-panel luigi__margin-bottom--small">
    <div class="fd-layout-panel__body">
      <div class="fd-message-strip" role="alert">
        <div class="fd-message-strip__text">
          Called with params:<br />
          <pre>{{ nodeParams | json }}</pre>
        </div>
      </div>
    </div>
  </div>
  <div class="fd-layout-panel luigi__margin-bottom--small" *ngIf="hasBack">
    <div class="fd-layout-panel__body">
      <p>
        Advanced: node Params and preserveView active. <br />
        <a
          href="javascript:void(0)"
          class="fd-link"
          (click)="
            linkManager()
              .withParams({ foo: 'bar' })
              .navigate('/environments/env1', null, true)
          "
          >Go to /environments/env1 with preserveView</a
        >
      </p>
      <p>
        <a href="javascript:void(0)" class="fd-link" (click)="linkManager().goBack()">
          Go back: use default history method
        </a>
      </p>
    </div>
  </div>
</section>

<section class="fd-section" *ngIf="preservedViewCallbackContext">
  <div class="fd-layout-panel luigi__margin-bottom--small">
    <div class="fd-layout-panel__body">
      <div class="fd-message-strip" role="alert">
        <div class="fd-message-strip__text">
          Context received from linkManager().goBack():<br />
          <pre>{{ preservedViewCallbackContext | json }}</pre>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="fd-section">
  <div class="fd-section__header">
    <h3 *ngIf="projectId" class="fd-section__title">
      Settings of {{ projectId }}
    </h3>
    <h3 *ngIf="!projectId" class="fd-section__title">Global Settings</h3>
  </div>

  <div class="fd-layout-panel fd-has-margin-bottom-small">
    <div class="fd-layout-panel__header">
      <div class="fd-layout-panel__head">
        <h3 class="fd-layout-panel__title">
          LuigiClient hasBack/GoBack
        </h3>
      </div>
    </div>
    <div class="fd-layout-panel__body">
      <div *ngIf="hasBack">
        <div class="fd-form-item">
          <label class="fd-form-label"
            >Modify goBackContext value, that you receive then via
            LuigiClient.addContextUpdateListener():
          </label>
          <input type="text" class="fd-input" [(ngModel)]="callbackValue" />
        </div>
        <p>
          <button class="fd-button" (click)="goBack()">Click here</button> to go back to
          your preserved view.
        </p>
      </div>
      <div *ngIf="!hasBack">
        No go back state available,
        <a
          href="javascript:void(0)"
          class="fd-link"
          (click)="linkManager().navigate('/projects/pr2')"
          >Click here</a
        >
        to go to <i>project two</i>, where you can try out hasBack functionality
      </div>
    </div>
  </div>

  <div *ngIf="isModal" class="fd-layout-panel fd-has-margin-bottom-small">
    <div class="fd-layout-panel__header">
      <div class="fd-layout-panel__head">
        <h3 class="fd-layout-panel__title">
          LuigiClient Modal
        </h3>
      </div>
    </div>
    <div class="fd-layout-panel__body">
      <button class="fd-button" (click)="uxManager().closeCurrentModal()">
        Close modal
      </button>
    </div>
  </div>

  <br />
  <div
    *ngIf="userSettings !== undefined"
    class="fd-layout-panel fd-has-margin-bottom-small"
  >
    <div class="fd-layout-panel__header">
      <div class="fd-layout-panel__head">
        <h3 class="fd-layout-panel__title">
          LuigiClient User Settings
        </h3>
      </div>
    </div>
    <div class="fd-layout-panel__body">
      <pre>{{ userSettings | json }}</pre>
    </div>
  </div>
</section>
<section *ngIf="testFeatureToggleActive" class="fd-section">
  <div class="fd-layout-panel">
    This is a feature toggle test and only visible if ft1 is active.
  </div>
</section>

<section class="fd-section">
  <div class="fd-layout-panel luigi__margin-bottom--small">
    <div class="fd-layout-panel__header">
      <div class="fd-layout-panel__head">
        <h3 class="fd-layout-panel__title">Navigate</h3>
      </div>
    </div>
    <div class="fd-layout-panel__body">
      <ul class="fd-list">
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            data-testid="curr-link-virtualtree"
            class="fd-link"
            (click)="getCurrentRouteFromVirtualTree()"
            >getCurrentRoute fromVirtualTreeRoot</a
          >
          <app-code-snippet
            data="linkManager().fromVirtualTreeRoot().getCurrentRoute().then(...)"
          ></app-code-snippet>
          <p data-testid="curr-text-virtualtree">{{currentRouteVirtual}}</p>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            data-testid="curr-link-no-option"
            class="fd-link"
            (click)="getCurrentRoute()"
            >getCurrentRoute</a
          >
          <app-code-snippet
            data="linkManager().getCurrentRoute().then(...)"
          ></app-code-snippet>
          <p data-testid="curr-text-no-option">{{currentRoute}}</p>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            data-testid="update-modal-path-virtual-tree"
            (click)="linkManager().fromVirtualTreeRoot().updateModalPathInternalNavigation('xyz')"
            >updateModalPathInternalNavigation fromVirtualTreeRoot</a
          >
          <app-code-snippet
            data="linkManager().fromVirtualTreeRoot().updateModalPathInternalNavigation('xyz')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            data-testid="update-modal-path-from-parent"
            (click)="linkManager().fromParent().updateModalPathInternalNavigation('xyz')"
            >updateModalPathInternalNavigation fromParent</a
          >
          <app-code-snippet
            data="linkManager().fromParent().updateModalPathInternalNavigation('xyz')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            data-testid="update-modal-path-from-context"
            (click)="linkManager().fromContext('project').updateModalPathInternalNavigation('xyz')"
            >updateModalPathInternalNavigation fromContext</a
          >
          <app-code-snippet
            data="linkManager().fromContext('project').updateModalPathInternalNavigation('xyz')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            data-testid="update-modal-path-closest-context"
            (click)="linkManager().fromClosestContext().updateModalPathInternalNavigation('xyz')"
            >updateModalPathInternalNavigation fromClosestContext</a
          >
          <app-code-snippet
            data="linkManager().fromClosestContext().updateModalPathInternalNavigation('xyz')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="linkManager().navigate('/overview')"
            >absolute: to overview</a
          >
          <app-code-snippet data="linkManager().navigate('/overview')"></app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="linkManager().navigate('/projects/pr2')"
            >absolute: to /projects/pr2</a
          >
          <app-code-snippet data="linkManager().navigate('/projects/pr2')"></app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="linkManager().navigate('users/groups/stakeholders')"
            >relative: to stakeholders</a
          >
          <app-code-snippet
            data="linkManager().navigate('users/groups/stakeholders')"
          ></app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager().navigate('/projects/pr1/settings?ft=ft1')
            "
            >FeatureToggle</a
          >
          <app-code-snippet
            data="linkManager().navigate('/projects/pr1/settings?ft=ft1')"
          ></app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .fromClosestContext()
                .navigate('/users/groups/stakeholders')
            "
          >
            closest parent: to stakeholders</a
          >
          <app-code-snippet
            data="linkManager().fromClosestContext().navigate('/users/groups/stakeholders')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .fromParent()
                .navigate('/pr1')
            "
          >
            from parent: to sibling</a
          >
          <app-code-snippet data="linkManager().fromParent().navigate('/pr1')">
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            data-testid="fromcontext-settings-link"
            class="fd-link"
            (click)="
              linkManager()
                .fromContext('project')
                .navigate('/settings')
            "
          >
            parent by name: project to settings</a
          >
          <app-code-snippet
            data="linkManager().fromContext('project').navigate('/settings')"
          ></app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .fromClosestContext()
                .withParams({ foo: 'bar' })
                .navigate('settings')
            "
          >
            project to settings with params (foo=bar)</a
          >
          <app-code-snippet
            data="linkManager().fromClosestContext().withParams({foo: 'bar'}).navigate('settings')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .fromClosestContext()
                .withParams({ feature: 'toggle' })
                .navigate('settings_ft?ft=ft1')
            "
          >
            project to settings with params (foo=bar) and FeatureToggle</a
          >
          <app-code-snippet
            data="linkManager().fromClosestContext().withParams({feature: 'toggle'}).navigate('settings_ft?ft=ft1')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .fromContext('NONEXISTING')
                .navigate('/settings')
            "
          >
            parent by name: with nonexisting context</a
          >
          (look at the console)
          <app-code-snippet
            data="linkManager().fromContext('NONEXISTING').navigate('/settings')"
          ></app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a href="javascript:void(0)" class="fd-link" (click)="navigateAndShowAlert()">
            with preserved view: project to global settings and back</a
          >
          <app-code-snippet
            data="linkManager().navigate('/settings', null, true)"
          ></app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .withParams({ test: true })
                .navigate('/settings', null, true)
            "
          >
            extended preserved view example with params: project to global settings and
            back</a
          >
          <app-code-snippet
            data="linkManager().withParams({test: true}).navigate('/settings', null, true)"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .withParams({ test: true })
                .openAsModal('/settings', {
                  title: 'Preserved View',
                  size: 'm'
                })
            "
          >
            extended preserved view example with params rendered in a modal: project to
            global settings and back</a
          >
          <app-code-snippet
            data="linkManager().withParams({test: true}).openAsModal('/settings', {title:'PreservedView', size:'m'})"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="linkManager().openAsDrawer('/projects/pr2/drawer')"
          >
            Open drawer with default settings</a
          >
          <app-code-snippet data="linkManager().openAsDrawer('/projects/pr1/drawer');">
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager().openAsDrawer('/projects/pr1/drawer', {
                header: false,
                size: 'xs',
                backdrop: true
              })
            "
          >
            Open view in drawer component with and w/o backdrap and header</a
          >
          <app-code-snippet
            data="linkManager().openAsDrawer('/projects/pr1/drawer', {header: false, size:'xs', backdrop: true});"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager().openAsModal('/projects/pr2/webcomponent', {
                title: 'Webcomponent in a fullscreen modal',
                size: 'fullscreen'
              })
            "
            >Open webcomponent in a fullscreen modal</a
          >
          <app-code-snippet
            data="linkManager().openAsModal('/projects/pr2/webcomponent', {
              title: 'Webcomponent in a modal',
              size: 'fullscreen'
            })"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager().openAsModal('/projects/pr2/webcomponent', {
                title: 'Webcomponent in a modal',
                size: 'm'
              })
            "
            >Open webcomponent in a modal</a
          >
          <app-code-snippet
            data="linkManager().openAsModal('/projects/pr2/webcomponent', {
              title: 'Webcomponent in a modal',
              size: 'm'
            })"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            data-testid="open-modal-pr2-large"
            (click)="
              linkManager().openAsModal('/projects/pr2', {
                title: 'microfrontend in a modal',
                size: 'l',
                keepPrevious: true
              })
            "
            >Open a modal large size</a
          >
          <app-code-snippet
            data="linkManager().openAsModal('/projects/pr2', {
              title: 'microfrontend in a modal',
              size: 'l',
              keepPrevious: true
            })"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            data-testid="open-modal-pr2-s"
            (click)="
              linkManager().openAsModal('/projects/pr2', {
                title: 'microfrontend in a modal',
                size: 's',
                keepPrevious: true
              })
            "
            >Open a modal small size</a
          >
          <app-code-snippet
            data="linkManager().openAsModal('/projects/pr2', {
              title: 'microfrontend in a modal',
              size: 's',
              keepPrevious: true
            })"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager().openAsSplitView('/projects/pr2/webcomponent', {
                title: 'Webcomponent in a split view',
                size: '25'
              })
            "
            >Open webcomponent in splitView</a
          >
          <app-code-snippet
            data="linkManager().openAsSplitView('/projects/pr2/webcomponent', {
              title: 'Webcomponent in a split view',
              size: '25'
            })"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="linkManager().goBack(true)"
          >
            go back: single iframe, standard history back</a
          >
          <app-code-snippet data="linkManager().goBack()"> </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager().navigate(
                '/#?intent=Sales-settings?param1=abc&param2=bcd'
              )
            "
          >
            navigate to settings with intent with parameters</a
          >
          <app-code-snippet
            data="linkManager().navigate('/#?intent=Sales-settings?param1=abc&param2=bcd')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager().navigateToIntent(
                'Component-settings', {project: 'pr1', param2: '22'}
              )
            "
          >
            navigate to settings of project 1 with alternative intent method:
            navigateToIntent
          </a>
          <app-code-snippet
            data="linkManager().navigateToIntent('Component-settings', {project: 'pr1', param2: '22'})"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .fromClosestContext()
                .withParams({ foo: 'bar' })
                .newTab()
                .navigate('settings')
            "
          >
            navigate to new tab, using closest context and params</a
          >
          <app-code-snippet
            data="linkManager().fromClosestContext().withParams({ foo: 'bar' }).newTab().navigate('settings')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .preserveQueryParams(true)
                .navigate('/projects/pr2')
            "
          >
            navigate to project 2 with query parameters</a
          >
          <app-code-snippet
            data="linkManager().preserveQueryParams(true).navigate('/projects/pr2')"
          >
          </app-code-snippet>
        </li>
        <li class="fd-list__item">
          <a
            href="javascript:void(0)"
            class="fd-link"
            (click)="
              linkManager()
                .preserveQueryParams(false)
                .navigate('/projects/pr2')
            "
          >
            navigate to project 2 without query parameters</a
          >
          <app-code-snippet
            data="linkManager().preserveQueryParams(false).navigate('/projects/pr2')"
          >
          </app-code-snippet>
        </li>
      </ul>
    </div>
  </div>
</section>
